<template>
	<view class="login">
		<view class="boxDiv">
			<view class="box">

				<view class="imgTop">
					智慧CRT消防一体机
					<image src="/static/img/login-title1.png" class="img"></image>
				</view>
				<div class="demoain-all">
					<input type="text" auto-focus="" placeholder="请输入分站点域名,例: zkturing" v-model="name"
						class="demoain int" :class="inputSelectOne? 'active' : ''" @focus="FocusOne" @blur="BlursOne" />
					<span class="demoain-text">.iot.store</span>
					<img class="demoain-img" title="使用说明" src="../../static/img/login-more.png" @click="toOpenHelper" alt="" />
				</div>
				<input type="text" autocomplete="off" placeholder="请输入用户名" v-model="username" class="int"
					:class="inputSelectTwo? 'active' : ''" @focus="FocusTwo" @blur="BlursTwo" />
				<input type="password" autocomplete="off" placeholder="请输入密码" v-model="password" class="int"
					@keydown.enter="go" :class="inputSelectThree? 'active' : ''" @focus="FocusThree"
					@blur="BlursThree" />
				<view class="btn" @click="go">确定</view>
			</view>
			<view class="tip">提示：F11键——全屏切换键；ALT+F4——关闭程序</view>
			<view class="tip">屏幕最佳分辨率：1920*1080px</view>

		</view>
		<view class="footer">Copyright © 武汉中科图灵科技有限公司 &nbsp;&nbsp; |&nbsp;&nbsp; All Rights Reserved</view>
		<helper v-if="helperShow" @isHelperShow="isHelperShow"></helper>
	</view>
</template>

<script>
	import CryptoJS from '@/api/crypto-js.js'
	import Helper from "@/pages/login/helper.vue"
	import VueAMap from 'vue-amap';
	export default {
		components: {
			Helper
		},
		data() {
			return {
				name: uni.getStorageSync('urlName') || '',
				username: uni.getStorageSync('username') || '',
				password: uni.getStorageSync('password') || '',
				type: 'text',
				inputSelectOne: false,
				inputSelectTwo: false,
				inputSelectThree: false,
				helperShow: false
			}
		},
		methods: {
			FocusOne() {
				this.inputSelectOne = true
			},
			BlursOne() {
				this.inputSelectOne = false
			},
			FocusTwo() {
				this.inputSelectTwo = true
			},
			BlursTwo() {
				this.inputSelectTwo = false
			},
			FocusThree() {
				this.inputSelectThree = true
			},
			BlursThree() {
				this.inputSelectThree = false
			},
			async go() {
				if (!this.name) {
					uni.showToast({
						title: '域名不能为空',
						duration: 2000,
						icon: 'none'
					});
				}
				let reg = /^[a-zA-Z0-9]/
				if (!reg.test(this.name)) {
					uni.showToast({
						title: '输入的域名格式不正确',
						duration: 1500,
						icon: 'none'
					});
					return
				}
				if (!this.username) {
					uni.showToast({
						title: '请输入用户名',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				if (!this.password) {
					uni.showToast({
						title: '请输入密码',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				let obj = {
					domain: "https://"+this.name +".iot.store",//测试线
					username: this.username,
					password: this.password
				}
				const user = this.encryption({
					data: obj,
					key: 'pigxpigxpigxpigx',
					param: ['password']
				})
				let urlIp ="https://" + this.name +".iot.store" //测试线
				let netWorkFlag= await this.$help.getNetWork(urlIp)
				if (netWorkFlag) {
						uni.request({
							url: urlIp + '/admin/tenant/getTenantInfoByDomain',
							data: {
								domain: user.domain,
								username: encodeURIComponent(user.username),
								password: user.password
							},
							method: 'POST',
							success: (res) => {
								if (res.data.code == 0) {
									uni.setStorageSync('urlName', this.name)
									uni.setStorageSync('urlText', urlIp)
									uni.setStorageSync('username', this.username)
									uni.setStorageSync('password', this.password)
									if(!uni.getStorageSync('mapKey')){
										uni.request({
											url: urlIp + '/admin/sysconfigcomm/getconfig',
											method: 'GET',
											success: (response) => {
												let data = response.data.data
												let mapKey = data && data.mapKey ? data.mapKey : ''
												let mapHost = data && data.mapHost ? data.mapHost : ''
												let mapId = data && data.mapId ? data.mapId : ''
							
												uni.setStorageSync('mapKey', mapKey)
												uni.setStorageSync('mapHost', mapHost)
												uni.setStorageSync('mapId', mapId)
												window._AMapSecurityConfig = {
												  securityJsCode: mapHost //安全密钥
												}
												// 初始化vue-amap
												VueAMap.initAMapApiLoader({
												  // 高德的key
												  key: mapKey,
												  // 插件集合
												  plugin: [
												    'AMap.Autocomplete',
												    'AMap.Geocoder',
												    'AMap.Scale',
												    'AMap.Geolocation',
												    'MarkerClusterer',
												    "AMap.CircleMarker",
												    "AMap.PolyEditor", //编辑 折线多，边形
												    "AMap.Heatmap",
													  "Map3D"
												  ],
												  // 高德 sdk 版本，默认为 1.4.4
												  v: '1.4.15',
												  uiVersion: '1.1' // 版本号
												});
											},
											fail: (err) =>{
												console.log('err')
												// resolve(false)
											}
										})
									}

									uni.request({
										url: urlIp + '/admin/dept/findDetail',
										data: {
											id: res.data.data.userDeptId
										},
										header: {
											'authorization': 'Bearer ' + res.data.data.accessToken,
											'tenant-id': res.data.data.id
										},
										method: 'GET',
										success: (resDetail) => {
											let objDetail = {
												...res.data.data,
												largeScreenBackground: resDetail.data.data
													.largeScreenBackground || res.data.data
													.largeScreenBackground,
												aioHomePageType: resDetail.data.data
													.aioHomePageType || res.data.data
													.aioHomePageType,
												systemName: resDetail.data.data
													.aioSystemName || res.data.data.systemName
											}
											if (uni.getStorageSync('user') && JSON.parse(uni
													.getStorageSync('user'))
												.largeScreenBackground == resDetail.data.data
												.largeScreenBackground) {

											} else {
												if (resDetail.data.data.largeScreenBackground) {
													this.getImageUrl(resDetail.data.data
														.largeScreenBackground, 'signalChat',
														'img',
														'largeScreenBackground',
														'largeScreenBackground')
												}
											}
											uni.setStorageSync('user', JSON.stringify(objDetail))
											uni.navigateTo({
												url: "../home/home"
											})
										},
										fail: (err) => {
											uni.showToast({
												title: '当前域名不存在!',
												duration: 2000,
												icon: 'none'
											});
										}
									})


									//谷歌等浏览器不支持音频自动播放,需用户操作才行,在登录这激活一下音频
									getApp().globalData.innerAudioContext.play()
									getApp().globalData.innerAudioContext.stop()

								} else {
									uni.showToast({
										title: res.data.msg || '网络错误',
										duration: 2000,
										icon: 'none'
									});
								}

							},
							fail: (err) => {
								uni.showToast({
									title: '当前域名不存在!',
									duration: 2000,
									icon: 'none'
								});
							}
						})
				} else {
					uni.showToast({
						title: '网络异常，请重新尝试',
						duration: 2000,
						icon: 'none'
					});
				}
			},
			// url 图片地址
			// storeName indexedDB的仓库名称
			// sequenceId  索引sequenceId的值
			// messageType 索引messageType的值及设置对应保存图片是否本地保存的对应字段
			// nameValue   sqlite的name的值
			getImageUrl(url, storeName, sequenceId, messageType, nameValue) {
				let that = this
				uni.request({
					url: uni.getStorageSync('urlText') + '/admin/sys-file/' + url,
					method: 'GET',
					responseType: 'arraybuffer',
					success: ress => {
						let base64 = 'data:image/jpeg;base64,' + uni.arrayBufferToBase64(ress
							.data);

						// #ifdef H5
						that.$indexedDB.updateDB(that.$db, storeName, {
							sequenceId: messageType,
							messageType: messageType,
							data: base64
						}).then(function(res) {
							uni.setStorageSync(messageType, true)
						})
						// #endif
						// #ifndef H5
						let obj = {
							'name': nameValue,
							'avatar': base64
						}
						that.$help.updateSqliteDate('name', nameValue, obj, base64, messageType)
						// #endif
					},
					fail: (e) => {
						console.log("图片转换失败");
					}
				})
			},
			encryption(params) {
				let {
					data,
					type,
					param,
					key
				} = params;
				const result = JSON.parse(JSON.stringify(data));
				if (type === "Base64") {
					param.forEach(ele => {
						result[ele] = btoa(result[ele]);
					});
				} else {
					param.forEach(ele => {
						var data = result[ele];
						key = CryptoJS.enc.Latin1.parse(key);
						var iv = key;
						// 加密
						var encrypted = CryptoJS.AES.encrypt(data, key, {
							iv: iv,
							mode: CryptoJS.mode.CBC,
							padding: CryptoJS.pad.ZeroPadding
						});
						result[ele] = encrypted.toString();
					});
				}
				return result;
			},
			//打开帮助中心弹窗
			toOpenHelper() {
				this.helperShow = true
			},
			isHelperShow(val) {
				this.helperShow = val
			}
		}
	}
</script>
<style lang="scss" scoped>
	.login {
		width: 100%;
		height: 100%;
		background: url(../../static/login-bg.png) no-repeat center;
		background-size: 100% 100%;
		margin: 0 auto;
		position: relative;
		color: #fff;

		.boxDiv {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.box {
			width: 9.125rem;
			background-color: rgba(5, 23, 37, 0.4000);
			padding-bottom: 60px;
			margin-bottom: 25px;
			overflow: hidden;

			.imgTop {
				width: 100%;
				height: 37px;
				margin: 0.625rem 0;
				text-align: center;
				line-height: 37px;
				position: relative;
				font-size: 26px;
				color: #3FE6FF;
				font-family: 'PingFangSC-Medium';

				.img {
					width: 100%;
					height: 1px;
					position: absolute;
					left: 0;
					top: 18px;
				}
			}


			.int {			
				width: 6.25rem;
				height: 50px;
				margin: 0 auto 30px;
				font-size: 16px;
				font-family: PingFangSC-Regular, PingFang SC;
				color: #fff;
				padding-left: 46px;
				box-sizing: border-box;
				background: rgba(11, 32, 48, 0.5) url(../../static/login-icon.png) no-repeat 14px 14px;
				border-radius: 3px;
				opacity: 0.8;
				border: 1px solid rgba(63, 230, 255, 0.3000);
			}

			.int:nth-child(3) {
				background: url(../../static/username.png) no-repeat 14px 14px;
			}

			.int:nth-child(4) {
				background: url(../../static/password.png) no-repeat 14px 14px;
			}

			.active {
				outline: 1px solid #3FE6FF;
				background-color: rgba(11, 32, 48, 0.5);
				box-shadow: 0px 0px 6px 0px rgba(19, 223, 255, 0.41);
				border-radius: 3px;
			}

			// 
			.demoain-all {
				display: flex;
				align-items: center;
				width: 6.25rem;
				margin: 30px auto;
				margin-top: 0px;

				.demoain {
					width: calc(100% - 155px); //云安恒泰
					margin: 0;
				}

				.demoain-img {
					width: 20px;
					cursor: pointer;
				}

				.demoain-text {
					font-size: 16px;
					margin: 0 10px;
				}

			}
			.btn {
				width: 6.25rem;
				height: 50px;
				margin: 0 auto;
				margin-bottom: 30px;
				background: #3FE6FF;
				border-radius: 3px;
				text-align: center;
				line-height: 50px;
				font-size: 18px;
				cursor: pointer;
			}
		}

		.tip {
			width: 100%;
			line-height: 30px;
			text-align: center;
			font-size: 14px;
			color: rgba(255, 255, 255, 0.7);
		}

		.footer {
			position: fixed;
			bottom: 0.5rem;
			left: 50%;
			transform: translate(-50%, 0);
			font-size: 14px;
		}
	}
	.uni-input-input:-internal-autofill-selected {
		background-color: none !important;
	}
	
	.login .boxDiv .uni-input-wrapper .uni-input-placeholder{
		top:50% !important;
		transform: translateY(-50%);
	}
</style>
